import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Platform,
  Image,
  Dimensions,
  ConsoleModule,
  Modal,
  TextInput,
} from '@hippy/react';

import IconFunc1 from '../../assets/func1.png'
import IconFunc2 from '../../assets/func2.png'
import IconFunc3 from '../../assets/func3.png'
import IconFunc4 from '../../assets/func4.png'
import IconFunc5 from '../../assets/func5.png'
import IconFunc6 from '../../assets/func6.png'
import IconFunc7 from '../../assets/func7.png'
import IconFunc8 from '../../assets/func8.png'
import IconFunc9 from '../../assets/func9.png'
import IconFunc10 from '../../assets/func10.png'

import HomeFuncItem from './HomeFuncItem'

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    height: 200
  },
  funcBg: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 100
  }
});

export default class HomeFunc extends Component {
  constructor(props) {
    super(props);

  }

  render() {

    const rendeFirst = () => {
      const items = [
        {img: IconFunc1, text: '整存整取'},
        {img: IconFunc2, text: '大额存单'},
        {img: IconFunc3, text: '存款证明'},
        {img: IconFunc4, text: '信用卡还款'},
        {img: IconFunc5, text: '电子回单'},
      ];      
      return (
        items.map((item, i) => (
          <HomeFuncItem 
            key={i}
            img={item.img}
            text={item.text}
          />
        ))
      );
    };
    const rendeSecond = () => {
      const items = [
        {img: IconFunc6, text: '惠薪贷'},
        {img: IconFunc7, text: '手机号转账'},
        {img: IconFunc8, text: '预约转账'},
        {img: IconFunc9, text: '云闪付'},
        {img: IconFunc10, text: '更多'},
      ];      
      return (
        items.map((item, i) => (
          <HomeFuncItem 
            key={i}
            img={item.img}
            text={item.text}
          />
        ))
      );
    };
    return (
      <View style={styles.container}>
        <View style={styles.funcBg}>
          {rendeFirst()}
        </View>
        <View style={styles.funcBg}>
          {rendeSecond()}
        </View>
      </View>
    );
  }
}
